import React, { Component } from 'react';

import { Route, NavLink, Redirect, Switch,withRouter} from 'react-router-dom'

import { FinditemStyle, TitleitemStyle, BtnStyle, BottomStyle ,NewStyle,Nav } from './style'

import Maid from '../Maid';
import Guochuang from '../Guochuang';
import GreenM from '../GreenM';

import connect from './connect'

@connect
@withRouter
class Finditem extends Component {
    componentDidMount() {
        // 发起网络请求
        this.props.getRecommendCmp()
    }
    render() {
        // 异步加载容错\
        let recommend = this.props.Recommend ? this.props.Recommend.toJS() : []
        // 父组件url
        let pathname = this.props.match.path
       
        return (
            <>
                <TitleitemStyle>为你推荐</TitleitemStyle>
                <FinditemStyle>
                    {
                        recommend.map((item,index) => {
                            return(
                                <ul key={index}>
                                    <li>
                                        <img src={item.image} alt="" />
                                    </li>
                                    <li>{item.title}</li>
                                    <li>
                                        <p>{item.sub_title}</p>
                                    </li>
                                    <li>{item.right_bottom}</li>
                                </ul>
                            )
                        })
                    }

                </FinditemStyle>
                <BtnStyle>
                    <p>查看更多</p>
                    <p onClick={this.nextitem.bind(this)}>换一换</p>
                </BtnStyle>
                <TitleitemStyle>今日更新</TitleitemStyle>
                <NewStyle>
                    <ul>
                        <li>
                            <img src='https://tn1-f2.kkmh.com/image/200106/mWFdkbzFW.webp-t.w360.jpg.h.p' alt="" />
                        </li>
                        <li>八十一道超纲题</li>
                        <li>剧情 奇幻 悬疑</li>
                    </ul>
                    <ul>
                        <li>
                            <img src='https://f2.kkmh.com/image/200515/ZSK4gnbuN.webp-t.w360.jpg.h.p' alt="" />
                        </li>
                        <li>剑与山河</li>
                        <li>奇幻 古风 玄幻</li>
                    </ul>
                    <ul>
                        <li>
                            <img src='https://f2.kkmh.com/image/181206/EX1Wsqph0.webp-t.w360.jpg.h.p' alt="" />
                        </li>
                        <li>最终魂意</li>
                        <li>奇幻 少年 热血</li>
                    </ul>
                    <ul>
                        <li>
                            <img src='https://tn1-f2.kkmh.com/image/200220/ZvxPzNknP.webp-t.w360.jpg.h.p' alt="" />
                        </li>
                        <li>刀鞘的孩子</li>
                        <li>奇幻 古风 剧情</li>
                    </ul>
                
                </NewStyle>
                
                <Nav>
                    <NavLink exact to={`${pathname}/Maid`}>少女榜</NavLink>
                    <NavLink to={`${pathname}/GreenM`}>青女榜</NavLink>
                    <NavLink to={`${pathname}/Guochuang`}>国创榜</NavLink>
                </Nav>
                <Switch>

                <Route path={`${pathname}/Maid`} children={route => <Maid {...route} />} />
                <Route path={`${pathname}/GreenM`} children={route => <GreenM {...route} />} />
                <Route path={`${pathname}/Guochuang`} children={route => <Guochuang {...route} />} />

               {/* 重定向 */}
                 <Redirect from={`${pathname}`} to={`${pathname}/Maid`} />

                </Switch>
                 
                <BottomStyle></BottomStyle>
            </>
        );
    }
    nextitem(){
        let page = Math.round(Math.random()*18)
        this.props.getRecommendCmp(page)
    }
}

export default Finditem;
